<template>
	<view class="order-item">
		<view class="order-header">
			<text class="order-number">单号：test16668116816965396536939981455</text>
			<text class="tag">我是状态</text>
		</view>
		<view class="order-main">
			<view class="order-main-item">
				<text>下单人</text>
				<text>张天师</text>
			</view>
			<view class="order-main-item">
				<text>下单时间</text>
				<text>2024/05/10 10:23:01</text>
			</view>
		</view>
		<view class="card-btns">
			<view class="btn">按钮0</view>
			<view class="btn">按钮1</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			lookDetail() {
				uni.navigateTo({
					url:'/packageOrderForm/orderDetail/orderDetail'
				})
			},
			
			fillInServiceVisitTime() {
				uni.navigateTo({
					url: '/packageOrderForm/serviceVisitTime/serviceVisitTime'
				})
			},
			
			completeOrder() {
				uni.navigateTo({
					url: '/packageOrderForm/completeOrder/completeOrder'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.order-item{
	width: 100%;
	border-radius: 12rpx;
	margin-bottom: 24rpx;
	padding:0 32rpx 40rpx 32rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background-color: white;
}
.order-header{
	height: 94rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-bottom:1px solid #E7E7E7;
	margin-bottom: 4rpx;
	.order-number{
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 20rpx;
	}
	.tag{
		display: flex;
		padding: 8rpx 20rpx;
		border-radius: 26rpx;
		font-size: 28rpx;
		color: #287EFF;
		background-color: rgba(40, 126, 255, 0.14);
	}
}
.order-main{
	display: flex;
	flex-direction: column;
	padding-bottom: 40rpx;
}
.order-main-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16rpx;
	text{
		line-height: 40rpx;
		font-size: 28rpx;
		&:nth-of-type(1) {
			color: #666666;
		}
		&:nth-of-type(2) {
			color: #111111;
		}
	}
}
.card-btns{
	display: flex;
	justify-content: space-between;
	align-items: center;
	.btn{
		display: flex;
		flex:1;
		align-items: center;
		justify-content: center;
		width: 299rpx;
		height: 74rpx;
		line-height: 37rpx;
		text-align: center;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		border: 2rpx solid #287EFF;
		color: #287EFF;
		font-size: 32rpx;
		&:nth-of-type(2) {
			margin-left: 20rpx;
			background-color:#287EFF;
			color: #ffffff;
		}
	}
}
</style>
